<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown  active"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Online Journal</h1>
					<h1 class="title">Creative Bits And Bobs</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content.
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper">
		<div class="inner_content">
		<div class="row pad30">
		
		<div class="col-md-9 pad25">
			<div class="post">
			<div class="row">
			<div class="col-md-12">
			
			
			<img src="img/large/4.jpg" alt="">
				<h1 class="post_link pad5">Donec Iaculis Metus Vitae Ligula</h1>
			<div class="clear"></div>
			
			<div class="post-meta muted">
			<ul>
				<li>Posted by <a href="#">admin</a> </li>
				<li>in <a href="#">web</a>, <a href="">graphics</a> </li>
				<li>tags <a href="#">prints</a>, <a href="">design</a> </li>
			</ul>
				</div> 
				
			<p>
				I was so excited by these heavy minute-guns following one another that I so far forgot my personal safety and my scalded hands as to clamber 
				up into the hedge and stare towards Sunbury.  As I did so a second report followed, and a big projectile hurtled overhead towards Hounslow.  
				I expected at least to see smoke or fire, or some such evidence of its work.  But all I saw was the deep blue sky above, with one solitary star, 
				and the white mist spreading wide and low beneath. And there had been no crash, no answering explosion.  The silence was restored; the minute 
				lengthened to three.
			</p>
			
			<h5>
				<span>Mauris sed nulla sed, egestas feugiat a dictum </span>
			</h5>
			
			<ul class="fa-ul">
				<li><i class="fa-li fa fa-star hue"></i> These hill-like forms grew lower and broader even as we stared.</li>
				<li><i class="fa-li fa fa-star hue"></i> As I did so a second report followed, and a big projectile hurtled overhead.</li>
				<li><i class="fa-li fa fa-star hue"></i> The figure of the Martian grew smaller as he receded, and presently the mist.</li>
			</ul>
			<br>
			
			<p>
				Every moment I expected the fire of some hidden battery to spring upon him; but the evening calm was unbroken. The figure of the Martian grew smaller as 
				he receded, and presently the mist and the gathering night had swallowed him up. By a common impulse we clambered higher. Towards Sunbury was a dark appearance, 
				as though a conical hill had suddenly come into being there, hiding our view of the farther country; and then, remoter across the river, over Walton, we saw another 
				such summit. These hill-like forms grew lower and broader even as we stared.
			</p>
			
			<p class="pad5">
				<a href="#" class="btn btn-primary btn-custom"><i class="fa fa-eye white"></i> Preview</a> 
				<a href="#" class="btn btn-primary btn-custom"><i class="fa fa-cloud-download white"></i> Download</a>
			</p>
			</div>
           </div>
		</div>
		<!--end post-->
		
	<!--author box-->
		<div class="pad15"></div>
		<div class="well">
		<img src="img/small/author.jpg" class="pull-left img-rounded pad_author" alt="" />
		<h3>About The Author</h3>
		<p>
			Every moment I expected the fire of some hidden battery to spring upon him; but the evening calm was unbroken. The figure of the Martian grew smaller as he receded, 
			and presently the mist and the gathering. hiding our view of the farther country; and then, remoter across the river, over Walton, we saw another such summit.
		</p>
		</div>
			
 	<!--related posts-->
			<div class="row pad25">
		<!--related post 1-->
				<div class="col-sm-4 col-md-4">
				<div class="hover_colour">
					<a href="img/portfolio/8.jpg" data-rel="prettyPhoto">
					<img src="img/portfolio/8.jpg" alt="" /></a>
				</div>
				<h6>
					<a href="#"><span>Donec Iaculis Metus Vitae Ligula</span></a><br>
					<i class="fa fa-clock-o muted"></i> 24/05/13 <i class="fa fa-comments muted"></i> <a href="#"> 6</a>
				</h6>
			</div>
			
		<!--related post 2-->
			<div class="col-sm-4 col-md-4">
			<div class="hover_colour">
				<a href="img/portfolio/3.jpg" data-rel="prettyPhoto">
				<img src="img/portfolio/3.jpg" alt="" /></a>
			</div>
			<h6>
				<a href="#"><span>Aliquam Convallis Erat Enim</span></a><br>
				<i class="fa fa-clock-o muted"></i> 11/05/13 <i class="fa fa-comments muted"></i> <a href="#"> 22</a>
			</h6>
			</div>
			
		<!--related post 3-->
			<div class="col-sm-4 col-md-4">
			<div class="hover_colour">
				<a href="img/portfolio/10.jpg" data-rel="prettyPhoto">
				<img src="img/portfolio/10.jpg" alt="" /></a>
			</div>
			<h6>
				<a href="#"><span>Mauris Sed Nulla Sed Egestas</span></a><br>
				<i class="fa fa-clock-o muted"></i> 23/04/13 <i class="fa fa-comments muted"></i> <a href="#"> 8</a>
			</h6>
			</div>
				</div>
	
	<!-- Comments -->   
		<h3 class="pad30">3 Comments</h3> 
		<!--Comment 1-->
		<div class="media pad10">
              <a class="pull-left" href="#">
                <img src="img/avatar1.jpg" alt="" class="avatar img-circle"/></a>
              <div class="media-body">
                <p class="media-heading">
				<a href="#">Lauren Williams</a> &raquo; 27 March 2013 &raquo; <a href="#">Reply</a></p>
				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
				Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 
				Donec lacinia congue felis in faucibus.
				
       <!--Comment 2-->      
				<div class="media">
                  <a class="pull-left" href="#">
                    <img src="img/my_avatar.jpg" alt="" class="avatar img-circle"/></a>
                  <div class="media-body">
                    <p class="media-heading">
					<a href="#">Admin</a> &raquo; 27 March 2013 &raquo; <a href="#">Reply</a></p>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, 
					vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue 
					felis in faucibus.
                  </div>
				</div>
			</div>
			
		<!--Comment 3-->
            <div class="media">
              <a class="pull-left" href="#">
                <img src="img/avatar2.jpg" alt="" class="avatar img-circle"/></a>
              <div class="media-body">
                <p class="media-heading">
				<a href="#">Lauren Williams</a> &raquo; 23 March 2013 &raquo; <a href="#">Reply</a></p>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 
				tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
				</div>
			</div>
		</div>
	<!-- //Comments -->
	
	<!-- Comment form -->
	<h3 class="pad25">Have Your Say</h3> 
		<div class="contact_form">  
		<form id="ajax-contact-form">
			<p class="form_info">name <span class="required">*</span></p>
			<input class="col-xs-12 col-sm-12 col-md-8" type="text" name="name" value="" />
			<p class="form_info">email <span class="required">*</span></p>
			<input class="col-xs-12 col-sm-12 col-md-8" type="text" name="email" value=""  />
			<p class="form_info">message</p>
			<textarea name="message" id="message" class="col-xs-12 col-sm-12 col-md-11"></textarea>
			<div class="clear"></div>
			<a href="#" class="btn btn-primary btn-custom">SEND</a>
			<div class="clear"></div>
		</form>
		</div>
			</div>
		
		<!--sidebar-->
			<div class="sidebar col-md-3">
		
			<h3>About Us</h3>
			<h5>Morbi blandit ultricies ultrices ivam us nec lectus sed orci voluptua oportere molestie.
			Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
			suspendisse ac nec et.</h5>
			
			<h3 class="pad15">Categories</h3>
			<ul class="fa-ul">
				<li><i class="fa-li fa fa-caret-right grey2"></i><a href="#">Design News</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Typography</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Premium Themes</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Photography</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Graphics</a></li>
			</ul>
			<div class="pad25"></div>
			
			<!--search-->
			<input type="text" placeholder="search">
		
				<h4 class="pad25">Popular Posts</h4>
					<ul class="media-list">
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post1.jpg" alt="" />
								<div class="media-body">
								<small class="muted">07/05/13</small><br>
								<a href="#">Aliquam convallis erat a enim dictum gravida nulla</a></div>
							</li>
							
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post2.jpg" alt="" />
								<div class="media-body">
								<small class="muted">29/04/13</small><br>
								<a href="#">Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugia</a></div>
							</li>
							
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post3.jpg" alt="" />
								<div class="media-body">
								<small class="muted">23/04/15</small><br>
								<a href="#">Mauris sed nulla sed, egestas feugiat a dictum libero</a></div>
							</li>
							</ul>
					
					<h4 class="pad25">Flickr Feed</h4>
					<div class="flickrs2">
						<div class="FlickrImagesBlog">
							<ul>
							</ul>
							</div>
								</div>
							</div>
						<div class="pad45"></div>
					</div>
				</div>
			</div>
			<div class="pad45 hidden-md hidden-lg"></div>
			<!--end-->
			
		<!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end--> 
<!-- scripts -->
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

<!-- FLICKR -->	
<script type="text/javascript">
//<![CDATA[
/*************************************************************
	FLICKR BLOG  - add your id - find it here - http://idgettr.com/
**************************************************************/
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60241562@N08&lang=en-us&format=json&jsoncallback=?", function(data){
		$.each(data.items, function(i,item){
			if(i<=8){ // <— change this number to display more or less images
				$("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo(".FlickrImagesBlog ul")
				.wrap("<li><a href='" + item.link + "' target='_blank' title='Flickr'></a></li>");
			}
		});			
    });	
//]]>
</script>
</body>
</html>
